<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
			b ody{
				width: 500px;
				height: 10000px;
				/* 背景尺寸: 函数: contain cover */
				background-size: contain; /* 等比例宽高【缩放】 保证页面图片全部显示*/
				background-image: url(img/奶龙表情包064_爱给网_aigei_com.gif);
				/* 背景图控制属性: 滚动 固定 */
				background-attachment: fixed;
			}
			div{
				width: 500px;
				height: 500px;
				/* 等同于border的功能 确定选择器是否选中 布局 */
				backgrou nd-color: #e4393c;
				background-image: url("img/奶龙 (87)_爱给网_aigei_com.gif");
				/* 背景图小于空间【自动平铺】 去掉平铺 */
				background-repeat: no-repeat;;
				back ground-repeat: repeat-x;
				back ground-repeat: repeat-y;
				/* 背景尺寸 属性值: 数值/百分比
				                   函数 cover 等比例宽高【放大】 图片覆盖整个容器
								        contain 等比例宽高【缩放】 保证页面图片全部显示*/
				border: 1px solid red;
				background-size: 20%;
				/* 背景定位: 先决条件 背景图小于外围空间 功能: 精灵图定位 */
				background-position: center bottom; /* 位置固定---9个点 */
				background-position: 300px 0;
				
				/* 复合属性: 全部子属性顺序  */
				/* background: background-image background-color background-position background-size background-repeat和background-attachment; */
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium veritatis quibusdam, doloribus aperiam alias suscipit cupiditate assumenda voluptatem delectus laboriosam nam nemo ex tempora error vel dolores esse corrupti ipsum!
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus repellendus ut est doloribus iste accusantium pariatur mollitia ab. Qui et corporis doloribus fuga vero voluptatem quo laudantium architecto iure pariatur.
		<!-- css背景: 背景图 背景颜色---区别  页面任意移动位置
		      html图片 img          ---区别  页面定死位置
			  子属性
			  background-color 背景颜色: 十六进制色值
			  复合属性---省去子属性
			  background: 十六进制色值-->
			  <div></div>
	</body>
</html>